 <template>
 	<el-dialog title="" width="60%"  visible :show-close="false" :modal-append-to-body="false" >
 		<i class="el-icon-close close" @click="cancel" style="color: white;z-index:10;"></i>
		 <div class="bt">完善学生资料</div>
 		<el-form label-width="100px" label-position="right" :inline="true" class="form">
 			<el-form-item label="中文名称" class="select-block">
 				<el-input v-model="form.zwm"  ></el-input>
 			</el-form-item>
 			<el-form-item label="英文名称" class="select-block">
 				<el-input v-model="form.ywm"  ></el-input>
 			</el-form-item>
 			<el-form-item label="性别" class="select-block">
                   <el-select v-model="form.xb">
  					  <el-option label="男" value="男"></el-option>
  					<el-option label="女" value="女" ></el-option>
  			      </el-select>
 			</el-form-item>
 			<el-form-item label="注册电话 *"class="select-block">
 				<el-input v-model="form.dh" ></el-input>
 			</el-form-item>
      <el-form-item label="出生日期" class="select-block">
 				<!-- <el-input v-model="vcsrq" placeholder="请输入出生日期" icon="add" ></el-input> -->
				<el-date-picker  v-model="form.csrq"  type="date" placeholder="请选择出生日期" style="width:180px;" >  </el-date-picker>
 			</el-form-item>
 			<el-form-item label="招生来源" class="select-block">
 				<el-input v-model="form.zsly"  ></el-input>
 			</el-form-item>
 			<el-form-item label="父母电话" class="select-block">
 				<el-input v-model="form.fmdh"  ></el-input>
 			</el-form-item>
 			<el-form-item label="微信号" class="select-block">
 				<el-input v-model="form.wx"  ></el-input>
 			</el-form-item>
 			<el-form-item label="家庭地址" class="select-block">
 				<el-input v-model="form.jtdz"  ></el-input>
 			</el-form-item>
 			<el-form-item label="公立学校" class="select-block">
 				<el-input v-model="form.glxx" ></el-input>
 			</el-form-item>
 			<!-- <el-form-item label="年级班级" class="select-block">
 				<el-input v-model="form.njmc"  ></el-input>
 			</el-form-item> -->
      <el-form-item label="年级班级" class="select-block">
				<el-select v-model="form.njbj"  >
						    <el-option label="一年级" value="1" ></el-option>
							<el-option label="二年级" value="2" ></el-option>
							<el-option label="三年级" value="3" ></el-option>
							<el-option label="四年级" value="4" ></el-option>
							<el-option label="五年级" value="5" ></el-option>
							<el-option label="六年级" value="6" ></el-option>
							<el-option label="初一"  value="7" ></el-option>
							<el-option label="初二"  value="8" ></el-option>
							<el-option label="初三"  value="9" ></el-option>
							<el-option label="高一"  value="10"></el-option>
							<el-option label="高二"  value="11"></el-option>
							<el-option label="高三"  value="12"></el-option>
				</el-select>

 			</el-form-item>
 			<br/>
 			<el-form-item label="学生标签">
 				<el-tag type="success" class="list1"   v-for="(v,index) in bqList">
 					{{v}}
 				<i class="el-icon-close del1" @click = "delbq(v)"></i>
 				</el-tag>
		          <el-button type="" size="small" class="submit" @click="componentsShow('bq')">+标签</el-button>

 			</el-form-item>
 		</el-form>
 		<el-button type="danger" size="small" class="submit" @click="cancel">退出</el-button>

 		<el-button type="primary" size="small" class="submit" @click="submit">保存</el-button>

        <BqComponent v-if="portComponents.bq.toggle" @close="componentsHide" :params="portComponents.bq.params"></BqComponent>

 	</el-dialog>
 </template>
 <script type="text/javascript">
 	import qs from 'qs'
 	import BqComponent from '../../admin/xxjbszManage/bq'
 	export default {
        components: { BqComponent},
 		props: ['params'],
 		data() {
 			return {
 				bqList:[],
 				form: {
					 dh :'',
					 xb :'',
					 zwm :'',
					 ywm :'',
					 isqy :'',
					 csrq :'',
					 zsly :'',
					 fmdh :'',
					 wx :'',
					 jtdz :'',
					 bq:'',
					 glxx :'',
					 njbj :'',
 					id:'',
 					bq:''
 				},
 				portComponents: {

                    bq: {
                        type: 'bq',
                        toggle: false,
                        params: '',
                        data: {}
                    }

                },
 			}
 		},
 		created() {
  		 this.form.id = this.params.row.id;
          this.loadinfo();
 		},
 		methods: {
 			delbq(bq){
 				var dd =[];
 				  for ( let i in this.bqList ) {
 				  	if (this.bqList[i]==bq){
 				  		continue}else{
 				  		 dd.push(this.bqList[i]);
 				  	}
 				  }
 				  this.bqList= dd;
             },
 			loadinfo(){
 				 var logininfo = JSON.parse(localStorage.logininfo) ;
         var params3 = qs.stringify({
               xxid:logininfo.xxid,
               yhid:logininfo.id,
               id:this.form.id
						});
 				 this.axios.post(this.$store.state.api+'xs/info',params3)
         .then( res =>  {
 							this.form=res.data.data;
 							try{
 							this.bqList = this.form.bq.split(',');
 							}catch(e){}
 					 }).catch(res => {
 						 this.$message.warning("服务器异常");
 			 				this.$emit('close', { type: 'info', cancel: true });
 					 })
 			},
 			 submit() {//检测
 				this.$store.state.loading = true;
 				/*if(!this.form.id) {
 					this.$message.warning('请填写分类');
 					this.$store.state.loading = false;
 					return;
 				}*/
 				//装载数据
 				var logininfo = JSON.parse(localStorage.logininfo);
 				var params2 = qs.stringify({
 						id: this.form.id,
 						dh: this.form.dh,
 						xb: this.form.xb,
 						zwm: this.form.zwm,
 						ywm: this.form.ywm,
// 						isqy: this.form.isqy,
 						csrq: this.form.csrq,
 						zsly: this.form.zsly,
 						fmdh: this.form.fmdh,
 						wx: this.form.wx,
 						glxx: this.form.glxx,
 						jtdz: this.form.jtdz,
 						njbj: this.form.njbj,
 						bq: this.bqList+'',
 						yhid: logininfo.id,
 						xxid: logininfo.xxid
 					})
 				//执行
 				    this.axios.post(this.$store.state.api + 'xs/update',  params2 )
 						.then(res => {
 							if(res.data.code == 1) {
 								this.$emit('close', { type: 'edit', cancel: false });
 								this.$store.state.loading = false;
 							} else {
 								this.$emit('close', { type: 'edit', cancel: false });
 								this.$store.state.loading = false;
 							}
 						}).catch(res => {
 							this.$message.warning("服务器异常");
 							this.$store.state.loading = false;
 						})
 			},

 			cancel() {
 				this.$emit('close', { type: 'edit', cancel: true })
 			},
 			componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id
                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;
                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
 			componentsHide (setting) { //关闭组件
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                       this.portComponents[i].toggle = false;
                       if (this.portComponents[i].type=='bq'){
                       	  if (!setting.cancel) {
                       	     for ( let b in setting.clist ) {

                        	 this.bqList.push( setting.clist[b]);
                          }

                       	  }
                       }else{
                        if (!setting.cancel) {
                        }
                       }
                       return;
                    }
                }
            }
 		}
 	}
 </script>
 <style lang="less" scoped>
 .wrap {
   text-align: center;
 }
 .bt{
     position: absolute;
     width: 100%;
     height: 50px;
     margin: 0 auto;
     top: 0;
     left: 0;
     background: #50BFFF;
     color:white;
     text-align:left;
     line-height: 50px;
     font-size: 17px;
     padding-left: 15px;
   }

 .form {
   text-align: left;
   margin-top: 20px;
 }
  .input {
           width: 300px;
           display: inline-block;
       }

 .select-block {
   // display: block;
   width: 46%;
 }

 .submit {
   width: 100px;
 }
 </style>
